<script lang="ts" setup>
import { reactive, ref, watch, toRefs } from "vue"
import { ElTable, FormInstance, type FormRules } from "element-plus"
import { formatDateTime } from "@/utils"
import { useCascaderAreaData } from "@vant/area-data"
// 接口
import { getWebSteDataApi } from "@/api/webSet"
import { usePagination } from "@/hooks/usePagination"
import { Search, Refresh } from "@element-plus/icons-vue"
import Editor from "@/components/RichText/index.vue"
import { useUserStore } from "@/store/modules/user" // 用户信息
const loading = ref(true)
const userStore = useUserStore() // 用户信息
const { paginationData, handleCurrentChange, handleSizeChange } = usePagination()
defineOptions({
  name: "WebProductSet"
})
const DATA = reactive<any>({
  formData: { details: "" }
})
const { formData } = toRefs(DATA)
const formRef = ref<FormInstance | null>(null)
const dialogVisible = ref<boolean>(false)
const areaoptions = useCascaderAreaData()
const props = {
  multiple: true,
  checkStrictly: true,
  label: "text",
  value: "text"
}
const props2 = {
  // multiple: true,
  checkStrictly: true,
  label: "text",
  value: "text"
}
const rules: FormRules = reactive({
  name: [{ required: true, trigger: "blur", message: "请输入产品名称" }],
  team: [{ required: true, trigger: "blur", message: "请选择可销售团队" }],
  state: [{ required: true, trigger: "blur", message: "请选择是否上下架" }],
  // code: [{ required: true, trigger: "blur", message: "请输入上级编码" }],
  var1: [{ required: true, trigger: "blur", message: "请选择上级" }],
  var2: [{ required: true, trigger: "blur", message: "请选择安装区域" }]
})

const dialogTitle = ref("")
const teamId = ref<undefined | string>(undefined)

// 查看详情
const handleSee = (row: any) => {
  dialogTitle.value = "详情"
  teamId.value = row.id
  formData.value = JSON.parse(JSON.stringify(row))
  if (row.team) {
    formData.value.team = row.team.split(",")
  }
  if (row.var2) {
    formData.value.var2 = eval(row.var2)
  }

  dialogVisible.value = true
}
// #endregion
// #endregion
const getMsg = (val: any) => {
  if (val) {
    formData.value.details = val
  }
}
// #region 查
const tableTotal = ref<number>()
const tableData = ref<any>([])
const getList = () => {
  getWebSteDataApi({
    page: paginationData.currentPage,
    size: paginationData.pageSize,
    name: searchData.name,
    var1: searchData.var1,
    area: searchData.area.join(","),
    userId: userStore.userInfo.user_id,
    state: searchData.state
  })
    .then((res: any) => {
      tableData.value = res.data.list
      tableTotal.value = res.data.total
      loading.value = false
    })
    .catch(() => {
      tableData.value = []
      loading.value = false
    })
}
// #endregion

// #region 搜索内容
const searchFormRef = ref<FormInstance | null>(null)
const searchData = reactive<any>({
  name: "",
  var1: "",
  area: [],
  state: "上架"
})
const resetSearch = () => {
  searchFormRef.value?.resetFields()
  if (paginationData.currentPage === 1) {
    getList()
    console.log("重置")
  }
  paginationData.currentPage = 1
}
const handleSearch = () => {
  if (paginationData.currentPage === 1) {
    getList()
    console.log("查询")
  }
  paginationData.currentPage = 1
}
const activeName = ref<any>("shelf")
const handleClick = (tab: any) => {
  paginationData.currentPage = 1

  if (tab.paneName == "shelf") {
    searchData.state = "上架"
  }
  if (tab.paneName == "offShelf") {
    searchData.state = "下架"
  }

  getList()
}
/** 监听分页参数的变化 */
watch([() => paginationData.currentPage, () => paginationData.pageSize], getList, { immediate: true })
</script>

<template>
  <div class="app-container">
    <el-card shadow="never" class="search-wrapper">
      <el-form ref="searchFormRef" :inline="true" :model="searchData">
        <el-form-item prop="name" label="产品名称">
          <el-input v-model.trim="searchData.name" clearable placeholder="请输入" style="width: 240px" />
        </el-form-item>
        <el-form-item prop="area" label="归属省份">
          <el-cascader
            size="large"
            placeholder="可输入地址快速查询"
            :props="props2"
            :options="areaoptions"
            v-model="searchData.area"
            :filterable="true"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :icon="Search" @click="handleSearch">查询</el-button>
          <el-button :icon="Refresh" @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 中间部分 -->
    <el-card v-loading="loading" shadow="never">
      <!-- 中间渲染内容 -->
      <div class="table-center">
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
          <el-tab-pane label="已上架产品" name="shelf" />
          <el-tab-pane label="已下架产品" name="offShelf" />
        </el-tabs>
        <el-table :data="tableData">
          <el-table-column type="selection" width="50" align="center" />
          <el-table-column prop="id" label="ID" width="120" align="center" />
          <el-table-column prop="name" label="产品名称" align="center" />
          <!-- <el-table-column prop="provinces" label="归属省份" align="center" /> -->
          <!-- <el-table-column prop="details" label="产品详情" align="center" /> -->
          <el-table-column prop="note" label="产品备注" align="center" />
          <el-table-column prop="state" label="上下架" align="center">
            <template #default="scope">
              <span :style="{ color: scope.row.state === '上架' ? '#67c23a' : '#f56c6c' }">{{ scope.row.state }}</span>
            </template>
          </el-table-column>
          <el-table-column v-if="activeName === 'shelf'" prop="createTime" label="上架时间" align="center">
            <template #default="scope"> {{ formatDateTime(scope.row.createTime) }} </template>
          </el-table-column>
          <el-table-column v-else prop="updateTime" label="下架时间" align="center">
            <template #default="scope"> {{ formatDateTime(scope.row.updateTime) }} </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" align="center">
            <template #default="scope">
              <el-button type="primary" text bg size="small" @click="handleSee(scope.row)">查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页器 -->
      <div class="pagination">
        <el-pagination
          background
          :layout="paginationData.layout"
          :page-sizes="paginationData.pageSizes"
          :page-size="paginationData.pageSize"
          :total="tableTotal"
          :currentPage="paginationData.currentPage"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    <!-- 弹窗 -->
    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="60%">
      <el-form ref="formRef" :model="formData" :rules="rules" label-width="100px" label-position="left">
        <el-form-item prop="name" label="产品名称">
          <el-input v-model="formData.name" placeholder="请输入" :disabled="dialogTitle === '详情'" />
        </el-form-item>
        <el-form-item prop="details" label="详情">
          <Editor :value="formData.details" @updateValue="getMsg" v-if="dialogTitle !== '详情'" />
          <div v-else>
            <div v-if="formData.details && formData.details != '<p><br/></p>'" v-html="formData.details" />
            <el-empty v-else description="暂无内容" />
          </div>
        </el-form-item>
        <el-form-item prop="state" label="上下架">
          <el-select v-model="formData.state" :disabled="dialogTitle === '详情'" style="width: 100%">
            <el-option label="上架" value="上架" />
            <el-option label="下架" value="下架" />
          </el-select>
        </el-form-item>
        <el-form-item prop="var2" label="可安装区域">
          <el-cascader
            :disabled="dialogTitle === '详情'"
            size="large"
            placeholder="可输入地址快速查询"
            :props="props"
            :options="areaoptions"
            v-model="formData.var2"
            :filterable="true"
            style="width: 100%"
          />
        </el-form-item>
        <!-- <el-form-item prop="provinces" label="归属省份">
          <el-input v-model="formData.provinces" placeholder="请输入" :disabled="dialogTitle === '详情'" />
        </el-form-item> -->
        <el-form-item prop="note" label="备注">
          <el-input type="textarea" v-model="formData.note" placeholder="请输入" :disabled="dialogTitle === '详情'" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
// .box-card {
//   height: 70px;
//   margin-bottom: 20px;
// }
.search-wrapper {
  margin-bottom: 20px;
}
.middle-top {
  margin-bottom: 20px;
}
.table-center {
  margin-bottom: 20px;
}
.pagination {
  display: flex;
  justify-content: flex-end;
}
</style>
